import React, {useEffect} from 'react';
import {useDispatch, useSelector} from 'react-redux';
import {CssBaseline, ThemeProvider} from '@material-ui/core';
import {Chart} from 'react-chartjs-2';

import theme from './assets/muiTheme';
import {draw} from './shared/utilities/chartjs.util';
import {MainLayout, MinimalLayout} from "./layouts";
import {Spinner, Notification} from "./shared/components";
import Routes from './Routes';
import {authCheckState} from "./store/actions/auth.actions";

Chart.helpers.extend(Chart.elements.Rectangle.prototype, {draw: draw});

const App = props => {
    const isAuthenticated = useSelector(store => store.auth.isAuthenticated);
    const isLoading = useSelector(store => store.auth.loading);
    const notification = useSelector(store => store.config.notification);

    const dispatch = useDispatch();
    const autoSignIn = () => dispatch(authCheckState());

    useEffect(() => {
        autoSignIn();
    }, []);

    return (
        <ThemeProvider theme={theme}>
            <CssBaseline />
            <Spinner open={isLoading}/>
            <Notification {...notification}/>
            {
                isAuthenticated ?
                    <MainLayout><Routes isAuthenticated={isAuthenticated}/></MainLayout> :
                    <MinimalLayout><Routes isAuthenticated={isAuthenticated}/></MinimalLayout>
            }
        </ThemeProvider>
    );

};

export default App;
